<template>
	<div>
		<el-row :gutter="15">
			<el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="100px">
				<el-card style="margin: 20px 0;">
					<div style="display: block;font-size: 20px;margin: 20px;color: red;">节目集相关</div>
					<el-col :span="15">
						<el-form-item label="节目集名称" prop="name">
							<el-input v-model="formData.name" placeholder="请输入节目集名称" clearable :style="{width: '100%'}"
								show-word-limit @input="checkInputLength">
								<template slot="append">name，中文标点符号，不超18字，必填</template>
							</el-input>
						</el-form-item>
					</el-col>
					<span
						:style="{color: isOverLimit ? 'red' : ''}">输入{{formData.name ? formData.name.length : 0}}个文字（最大18个字）</span>

					<el-col :span="15">
						<el-form-item label="商品名称" prop="goodsName">
							<el-input v-model="formData.goodsName" placeholder="请输入节目集名称" clearable
								:style="{width: '100%'}" show-word-limit @input="checkInputLength">
								<template slot="append">goodsName，商品名称</template>
							</el-input>
						</el-form-item>
					</el-col>



					<el-col :span="15">
						<el-form-item label="货号" prop="goodsNo">
							<el-input v-model="formData.goodsNo" placeholder="请输入节目集名称" clearable
								:style="{width: '100%'}" show-word-limit @input="checkInputLength">
								<template slot="append">goodsNo，货号</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="平台来源" prop="plys">
							<el-input v-model="formData.plys" placeholder="请输入节目集名称" clearable :style="{width: '100%'}"
								show-word-limit @input="checkInputLength">
								<template slot="append">plys，平台来源，必填</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="其他名称" prop="alias">
							<el-input v-model="formData.alias" placeholder="请输入其他名称" clearable :style="{width: '100%'}">
								<template slot="append"> alias，其他名称(别名)</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="英文名称" prop="enName">
							<el-input v-model="formData.enName" placeholder="请输入英文名称" clearable
								:style="{width: '100%'}">
								<template slot="append">enName，英文片名</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="名称首字母" prop="nameInitials">
							<el-input v-model="formData.nameInitials" placeholder="请输入名称首字母" clearable
								:style="{width: '100%'}">
								<template slot="append">nameInitials，名称首字母</template>
							</el-input>
						</el-form-item>
					</el-col>


					<el-col :span="15" style="display: flex;">
						<el-form-item label="分类" prop="category">
							<!-- 						<el-select v-model="formData.category" placeholder="category，分类，单选，必填" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in categoryOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select> -->


							<el-select v-model="formData.category" placeholder="请选择主分类" clearable
								@change="handleMainCategoryChange" style="width: 100%">
								<el-option v-for="category in mainCategories" :key="category" :label="category"
									:value="category">
								</el-option>
							</el-select>

						</el-form-item>
						<span style="margin-left: 40px;">分类</span>
					</el-col>
					<el-col :span="15">
						<el-form-item label="二级分类" prop="sndCategory">
							<!-- 						<el-select v-model="formData.sndCategory" placeholder="category，，单选，必填二级分类" multiple
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in sndCategoryOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
						 -->



							<el-select v-model="formData.sndCategory" multiple placeholder="请选择子分类" clearable
								style="width: 100%">
								<el-option v-for="subCategory in subCategories" :key="subCategory" :label="subCategory"
									:value="subCategory">
								</el-option>
							</el-select>


						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="标签" prop="labels">
							<el-input v-model="formData.labels" placeholder="请输入标签" clearable :style="{width: '100%'}">
								<template slot="append"> labels，节目关键字，多个以空格分隔，必填</template>
							</el-input>
						</el-form-item>
					</el-col>



					<el-col :span="15">
						<el-form-item label="简介" prop="dsc">
							<el-input v-model="formData.dsc" placeholder="请输入简介" clearable :style="{width: '100%'}"
								show-word-limit type="textarea" @input="checkDscLength">
								<template slot="append">dsc简介，20-80字必填</template>
							</el-input>
						</el-form-item>

						<div style="margin:20px 20px 20px 100px;">
							<span :style="{color: isDscInvalid ? 'red' : ''}">
								已经输入{{formData.dsc ? formData.dsc.length : 0}}个文字 -(20-80字)
								<span v-if="isDscInvalid">
									（{{formData.dsc && formData.dsc.length < 20 ? '至少需要20字' : '最多只能80字'}}）
								</span>
							</span>
						</div>

					</el-col>


					<el-col :span="15">
						<el-form-item label="节目最新集数" prop="newestSeriesNo">
							<el-input v-model="formData.newestSeriesNo" placeholder="请输入节目总集数" clearable
								:style="{width: '100%'}">
								<template slot="append">newestSeriesNo，节目最新集数</template>
							</el-input>
						</el-form-item>
					</el-col>


					<el-col :span="15">
						<el-form-item label="节目总集数" prop="seriesAmount">
							<el-input v-model="formData.seriesAmount" placeholder="请输入节目总集数" clearable
								:style="{width: '100%'}">
								<template slot="append">seriesAmount，按照实际剧集总集数填写</template>
							</el-input>
						</el-form-item>
					</el-col>


				</el-card>

				<el-card style="margin: 20px 0;">
					<div style="display: block;font-size: 20px;margin: 20px;color: red;">海报</div>
					<el-col :span="15">
						<el-form-item label="竖海报地址" prop="poster">
							<el-input v-model="formData.poster" placeholder="请输入竖海报地址" clearable
								:style="{width: '100%'}">
								<template slot="append">poster必填</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="横海报地址" prop="posterH">
							<el-input v-model="formData.posterH" placeholder="请输入横海报地址" clearable
								:style="{width: '100%'}">
								<template slot="append">posterH必填</template>
							</el-input>
						</el-form-item>
					</el-col>

				</el-card>


				<el-card style="margin: 20px 0;">
					<div style="display: block;font-size: 20px;margin: 20px;color: red;">视讯相关</div>
					<el-col :span="15">
						<el-form-item label="清晰度" prop="definition">
							<el-select v-model="formData.definition" placeholder="definition，单选，必填" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in definitionOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="节目播放顺序" prop="playOrder">
							<el-select v-model="formData.playOrder" placeholder="playOrder" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in playOrderOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="节目排序方式" prop="arrangeOrder">
							<el-select v-model="formData.arrangeOrder" placeholder="playOrder排序方式" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in arrangeOrderOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="时长单位" prop="lengthUnit">
							<el-select v-model="formData.lengthUnit" placeholder="engthUnit，单选，必填" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in lengthUnitOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="节目集时长" prop="videoLength">
							<el-input v-model="formData.videoLength" placeholder="请输入试播时长" clearable
								:style="{width: '100%'}">
								<template slot="append">videoLength，节目集时长，必填</template>
							</el-input>
						</el-form-item>
					</el-col>




					<el-col :span="15">
						<el-form-item label="试播时长" prop="trailerLength">
							<el-input v-model="formData.trailerLength" placeholder="请输入试播时长" clearable
								:style="{width: '100%'}">
								<template slot="append">trailerLength，试播时长，仅限数字</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="片头时长" prop="headLength">
							<el-input v-model="formData.headLength" placeholder="请输入片头时长" clearable
								:style="{width: '100%'}">
								<template slot="append">headLength，片头时长，仅限数字</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="片尾时长" prop="tailLength">
							<el-input v-model="formData.tailLength" placeholder="请输入片尾时长" clearable
								:style="{width: '100%'}">
								<template slot="append">tailLength，片尾时长，仅限数字</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="是否3D" prop="is3D">
							<el-select v-model="formData.is3D" placeholder="engthUnit，单选，必填是否3D" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in is3DOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="4K标识" prop="is4K">
							<el-select v-model="formData.is4K" placeholder="engthUnit，单选，必填4K标识" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in is4KOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="15">
						<el-form-item label="VR视频" prop="vrtype">
							<el-select v-model="formData.vrtype" placeholder="engthUnit，单选，必填4K标识" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in vrtypeOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>




					<el-col :span="15">
						<el-form-item label="是否预告片" prop="isTrailer">
							<el-select v-model="formData.isTrailer" placeholder="engthUnit，单选，必填是否预告片" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in isTrailerOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

				</el-card>


				<el-card style="margin: 20px 0;">
					<div style="display: block;font-size: 20px;margin: 20px;color: red;">扩展编目</div>
					<el-col :span="15">
						<el-form-item label="国家地区" prop="area">
							<el-input v-model="formData.area" placeholder="请输入国家地区" clearable :style="{width: '100%'}">
								<template slot="append">area，必填</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="年份" prop="year">
							<el-date-picker v-model="formData.year" format="yyyy" value-format="yyyy"
								:style="{width: '100%'}" placeholder="请选择年份" clearable></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="语言" prop="language">
							<el-input v-model="formData.language" placeholder="请输入语言" clearable
								:style="{width: '100%'}">
								<template slot="append">language，必填</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="栏目" prop="column">
							<el-input v-model="formData.column" placeholder="请输入栏目" clearable :style="{width: '100%'}">
								<template slot="append">column，剧集填无，栏目类按照播出栏目名称填写</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="五端统—栏目Id" prop="tvColumnId" label-width="144px">
							<el-input v-model="formData.tvColumnId" placeholder="请输入栏目" clearable
								:style="{width: '100%'}">
								<template slot="append">tvColumnId，五端统—栏目Id</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="五端统—栏目名称" prop="tvColumnName" label-width="144px">
							<el-input v-model="formData.tvColumnName" placeholder="请输入栏目" clearable
								:style="{width: '100%'}">
								<template slot="append">tvColumnName，五端统—栏目名称</template>
							</el-input>
						</el-form-item>
					</el-col>


					<el-col :span="15">
						<el-form-item label="主持人" prop="compere">
							<el-input v-model="formData.compere" placeholder="请输入主持人" clearable
								:style="{width: '100%'}">
								<template slot="append">compere，主持人</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="主持人首字母" prop="compereInitials">
							<el-input v-model="formData.compereInitials" placeholder="请输入主持人首字母" clearable
								:style="{width: '100%'}">
								<template slot="append">compereInitials，主持人首字母</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="制片人" prop="producer">
							<el-input v-model="formData.producer" placeholder="请输入制片人" clearable
								:style="{width: '100%'}">
								<template slot="append">producer，制片人</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="导演" prop="director">
							<el-input v-model="formData.director" placeholder="请输入导演" clearable
								:style="{width: '100%'}">
								<template slot="append">director，按实际导演填写，必填</template>
							</el-input>
						</el-form-item>
					</el-col>


					<el-col :span="15">
						<el-form-item label="导演首字母" prop="directorInitials">
							<el-input v-model="formData.directorInitials" placeholder="请输入导演" clearable
								:style="{width: '100%'}">
								<template slot="append">directorInitials，导演首字母</template>
							</el-input>
						</el-form-item>
					</el-col>



					<el-col :span="15">
						<el-form-item label="编剧" prop="screenWriter">
							<el-input v-model="formData.screenWriter" placeholder="请输入编剧" clearable
								:style="{width: '100%'}">
								<template slot="append">screenWriter，按实际编剧填写，必填</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="主演" prop="starring">
							<el-input v-model="formData.starring" placeholder="请输入主演" clearable
								:style="{width: '100%'}">
								<template slot="append">starring，主演/主角，必填</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="主演/主角首字母" prop="starringInitials" label-width="144px">
							<el-input v-model="formData.starringInitials" placeholder="请输入主演" clearable
								:style="{width: '100%'}">
								<template slot="append">starringInitials，主演/主角首字母</template>
							</el-input>
						</el-form-item>
					</el-col>






					<el-col :span="15">
						<el-form-item label="首播频道" prop="premiereChannel">
							<el-input v-model="formData.premiereChannel" placeholder="请输入首播频道" clearable
								:style="{width: '100%'}">
								<template slot="append">premiereChannel，剧集实际首播频道，网络平台首播则填无</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="首播时间" prop="premiereTime">
							<el-date-picker v-model="formData.premiereTime" format="yyyy-MM-dd"
								value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择首播时间"
								clearable></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="发行时间" prop="deployDate">
							<el-date-picker v-model="formData.deployDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
								:style="{width: '100%'}" placeholder="请选择发行时间" clearable></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="节⽬价格标签" prop="priceLabels">
							<el-input v-model="formData.priceLabels" placeholder="请输入节⽬价格标签" clearable
								:style="{width: '100%'}">
								<template slot="append">priceLabels，节⽬价格标签</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="建议价格" prop="suggestedPrice">
							<el-input v-model="formData.suggestedPrice" placeholder="请输入建议价格" clearable
								:style="{width: '100%'}">
								<template slot="append">suggestedPrice，建议价格</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="评分" prop="score">
							<el-input v-model="formData.score" placeholder="请输入评分" clearable :style="{width: '100%'}">
								<template slot="append">score，评分</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="奖项" prop="prize">
							<el-input v-model="formData.prize" placeholder="请输入奖项" clearable :style="{width: '100%'}">
								<template slot="append">prize，奖项</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="受众" prop="accesser">
							<el-input v-model="formData.accesser" placeholder="请输入受众" clearable
								:style="{width: '100%'}">
								<template slot="append">accesser，受众</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="赛事" prop="match">
							<el-input v-model="formData.match" placeholder="请输入赛事" clearable :style="{width: '100%'}">
								<template slot="append">match，赛事</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="记者" prop="reporter">
							<el-input v-model="formData.reporter" placeholder="请输入记者" clearable
								:style="{width: '100%'}">
								<template slot="append"> reporter，记者</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="嘉宾" prop="guest">
							<el-input v-model="formData.guest" placeholder="请输入嘉宾" clearable :style="{width: '100%'}">
								<template slot="append">guest，嘉宾</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="科目" prop="subject">
							<el-input v-model="formData.subject" placeholder="请输入科目" clearable :style="{width: '100%'}">
								<template slot="append">subject，科目</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="课时" prop="classHour">
							<el-input v-model="formData.classHour" placeholder="请输入课时" clearable
								:style="{width: '100%'}">
								<template slot="append">classHour，课时</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="歌手" prop="singer">
							<el-input v-model="formData.singer" placeholder="请输入歌手" clearable :style="{width: '100%'}">
								<template slot="append">singer，歌手</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="推荐语" prop="recommendDsc">
							<el-input v-model="formData.recommendDsc" placeholder="请输入推荐语" clearable
								:style="{width: '100%'}">
								<template slot="append"> recommendDsc，推荐语</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="更新频率" prop="upFrequency">
							<el-input v-model="formData.upFrequency" placeholder="请输入更新频率" clearable
								:style="{width: '100%'}">
								<template slot="append">upFrequency，更新频率</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="获奖电影节" prop="filmFestival">
							<el-input v-model="formData.filmFestival" placeholder="请输入获奖电影节" clearable
								:style="{width: '100%'}">
								<template slot="append"> filmFestival，获奖电影节</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="期数" prop="seriesPeriod">
							<el-input v-model="formData.seriesPeriod" placeholder="请输入期数" clearable
								:style="{width: '100%'}">
								<template slot="append">seriesPeriod，期数</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="是否付费" prop="vipFlag">
							<el-select v-model="formData.vipFlag" placeholder="engthUnit，单选，必填是否付费" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in vipFlagOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>


				</el-card>



				<el-card style="margin: 20px 0;">
					<div style="display: block;font-size: 20px;margin: 20px;color: red;">内容版权相关</div>


					<el-col :span="15">
						<el-form-item label="数据来源" prop="source">
							<el-input v-model="formData.source" placeholder="请输入数据来源" clearable
								:style="{width: '100%'}">
								<template slot="append">source，输入，必填</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="140px" label="出品及制片公司" prop="producerCompany">
							<el-input v-model="formData.producerCompany" placeholder="请输入出品及制片公司" clearable
								:style="{width: '100%'}">
								<template slot="append">producerCompany，出品及制片公司</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="内容提供商" prop="contentProvider">
							<el-input v-model="formData.contentProvider" placeholder="请输入内容提供商" clearable
								:style="{width: '100%'}">
								<template slot="append">contentProvider，内容提供商</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="140px" label="内容提供商编码" prop="contentProviderCode">
							<el-input v-model="formData.contentProviderCode" placeholder="请输入内容提供商编码" clearable
								:style="{width: '100%'}">
								<template slot="append">contentProviderCode，内容提供商编码</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="版权⽅" prop="copyrigh">
							<el-input v-model="formData.copyrigh" placeholder="请输入版权⽅" clearable
								:style="{width: '100%'}">
								<template slot="append">copyright，版权⽅</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="版权编码" prop="copyrightCode">
							<el-input v-model="formData.copyrightCode" placeholder="请输入版权编码" clearable
								:style="{width: '100%'}">
								<template slot="append">copyrightCode，版权编码</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="版权生效时间" prop="crBeginDate">
							<el-date-picker type="datetime" v-model="formData.crBeginDate" format="yyyy-MM-dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="版权生效时间"
								clearable>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="版权失效时间" prop="crEndDate">
							<el-date-picker type="datetime" v-model="formData.crEndDate" format="yyyy-MM-dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="版权失效时间"
								clearable>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="版权信息名称" prop="crInfoName">
							<el-input v-model="formData.crInfoName" placeholder="请输入版权信息名称" clearable
								:style="{width: '100%'}">
								<template slot="append">crInfoName，版权信息名称</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-card>


				<el-card style="margin: 20px 0;">
					<div style="display: block;font-size: 20px;margin: 20px;color: red;">其他信息</div>

					<el-col :span="15">
						<el-form-item label="发布方" prop="publisher">
							<el-input v-model="formData.publisher" placeholder="请输入发布方" clearable
								:style="{width: '100%'}">
								<template slot="append">publisher，发布方</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="外部数据标识" prop="outerCode">
							<el-input v-model="formData.outerCode" placeholder="请输入外部数据标识" clearable
								:style="{width: '100%'}">
								<template slot="append">outerCode，外部数据标识</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="发布平台" prop="publishPlatform">
							<el-input v-model="formData.publishPlatform" placeholder="请输入发布平台" clearable
								:style="{width: '100%'}">
								<template slot="append">publishPlatform，发布平台</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="关联节目" prop="relationProgram">
							<el-input v-model="formData.relationProgram" placeholder="请输入关联节目" clearable
								:style="{width: '100%'}">
								<template slot="append">relationProgram，关联节目</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="关联栏目" prop="relationColumn">
							<el-input v-model="formData.relationColumn" placeholder="请输入关联栏目" clearable
								:style="{width: '100%'}">
								<template slot="append">relationColumn，关联栏目</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="EPG分组" prop="epgGroup">
							<el-input v-model="formData.epgGroup" placeholder="请输入EPG分组" clearable
								:style="{width: '100%'}">
								<template slot="append">epgGroup，EPG分组</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="编目录入人" prop="cataloger">
							<el-input v-model="formData.cataloger" placeholder="请输入编目录入人" clearable
								:style="{width: '100%'}">
								<template slot="append">cataloger，编目录入人</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="创建时间" prop="createTime">
							<el-input v-model="formData.createTime" placeholder="请输入创建时间" clearable
								:style="{width: '100%'}">
								<template slot="append">createTime，创建时间</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="节目集状态" prop="status">
							<el-input v-model="formData.status" placeholder="请输入节目集状态" clearable
								:style="{width: '100%'}">
								<template slot="append">status，节目集状态</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="状态修改时间" prop="statusChangeTime">
							<el-input v-model="formData.statusChangeTime" placeholder="请输入状态修改时间" clearable
								:style="{width: '100%'}">
								<template slot="append">statusChangeTime，状态修改时间</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="操作人" prop="operator">
							<el-input v-model="formData.operator" placeholder="请输入操作人" clearable
								:style="{width: '100%'}">
								<template slot="append">operator，操作人</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="预留字段" prop="others">
							<el-input v-model="formData.others" placeholder="请输入预留字段" clearable
								:style="{width: '100%'}">
								<template slot="append">others，预留字段</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label="是否回调" prop="isStock">
							<el-select v-model="formData.isStock" placeholder="engthUnit，单选，必填是否回调" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in isStockOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="120px" label="外部来源ID" prop="outsideSetId">
							<el-input v-model="formData.outsideSetId" placeholder="请输入外部来源ID" clearable
								:style="{width: '100%'}">
								<template slot="append">outsideSetId，外部来源ID</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15">
						<el-form-item label-width="133px" label="覆盖子节目版权" prop="isCoverSonProCP">
							<el-select v-model="formData.isCoverSonProCP" placeholder="engthUnit，单选，必填覆盖子节目版权" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in isCoverSonProCPOptions" :key="index"
									:label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label-width="120px" label="播出资质" prop="playCertification">
							<el-input v-model="formData.playCertification" placeholder="请输入播出资质" clearable
								:style="{width: '100%'}">
								<template slot="append">playCertification，播出资质</template>
							</el-input>
						</el-form-item>
					</el-col>


					<el-col :span="15">
						<el-form-item label-width="180px" label="选填 :省份， CCTV专用" prop="province">
							<el-input v-model="formData.province" placeholder="请输入播出资质" clearable
								:style="{width: '100%'}">
								<template slot="append">province，选填 :省份， CCTV专用</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="是否MCN" prop="isMCN">
							<el-select v-model="formData.isMCN" placeholder="engthUnit，单选，必填是否MCN" clearable
								:style="{width: '100%'}">
								<el-option v-for="(item, index) in isMCNOptions" :key="index" :label="item.label"
									:value="item.value" :disabled="item.disabled"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label-width="120px" label="许可证号" prop="licenseNumber">
							<el-input v-model="formData.licenseNumber" placeholder="请输入许可证号" clearable
								:style="{width: '100%'}">
								<template slot="append">licenseNumber，许可证号</template>
							</el-input>
						</el-form-item>
					</el-col>

					<el-col :span="15">
						<el-form-item label="跟播未来节目集ID" prop="gbSetId" label-width="150px">
							<el-input v-model="formData.gbSetId" placeholder="请输入许可证号" clearable
								:style="{width: '100%'}">
								<template slot="append">gbSetId，跟播未来节目集ID</template>
							</el-input>
						</el-form-item>
					</el-col>


					<el-col :span="24">
						<el-form-item size="large">
							<el-button type="primary" @click="submitForm">提交</el-button>
							<el-button @click="resetForm">重置</el-button>
						</el-form-item>
					</el-col>
				</el-card>
			</el-form>
		</el-row>
	</div>
</template>
<script>
	export default {
		components: {},
		props: [
			"data"
		],

		data() {
			return {
				isOverLimit: false,
				isDscInvalid: false,
				categoryData: {
					'电影': ['爱情', '悬疑', '警匪', '科幻', '谍战', '古装', '动作', '战争', '家庭', '武侠', '历史', '神话', '恐怖', '纪实', '原创', '乡村',
						'预告片', '剧情', '喜剧', '青春', '校园', '传记', '宫廷', '军旅', '犯罪', '励志', '文艺', '魔幻', '动画', '花絮', '歌舞',
						'伦理', '奇幻', '灾难', '西部', '集锦'
					],
					'电视剧': ['爱情', '悬疑', '警匪', '科幻', '谍战', '古装', '动作', '战争', '家庭', '武侠', '历史', '神话', '恐怖', '纪实', '原创', '乡村',
						'预告片', '剧情', '喜剧', '青春', '校园', '传记', '宫廷', '军旅', '犯罪', '励志', '文艺', '动画', '花絮', '伦理', '奇幻',
						'集锦', '商战', '网剧', '偶像', '情景剧', '微短剧', '解说'
					],
					'综艺': ['脱口秀', '真人秀', '选秀', '访谈', '歌舞', '晚会', '益智', '搞笑', '情感', '纪实', '文化', '竞技', '美食', '旅游', '娱乐'],
					'资讯': ['军事', '社会', '时政', '国内', '民生', '国际', '法治', '港澳台', '体育', '公益', '评论', '经济', '科技', '历史', '文化'],
					'财经': ['农业', '宏观', '外汇', '保险', '科技', '公司', '股票', '证券', '访谈', '理财', '评论', '金融', '房地产', '收藏', '消费', '人物',
						'公益'
					],
					'少儿': ['动漫', '亲子', '儿歌', '儿童剧', '公益', '冒险', '晚会', '励志', '科幻', '搞笑', '早教', '童话', '益智', '手工', '美术', '玩具',
						'校园', '活动', '竞技', '故事', '识字', '诗词', '科普', '趣味'
					],
					'教育': ['小学', '中学', '大学', '公开课', '创业', '历史', '文化', '国学', '法律', '语言', '学前教育', '科普', '兴趣爱好', '职场', '职业教育',
						'管理', '学历', '艺术', '技能', '短视频'
					],
					'体育': ['综合赛事', '足球', '篮球', '排球', '网球', '台球', '羽毛球', '乒乓球', '田径', '举重', '体操', '棋牌', '武术', '赛车', '自行车',
						'击剑', '拳击', '搏击', '极限运动', '花样游泳', '游泳', '滑冰', '滑雪', '跳水', '高尔夫', '健身', '休闲运动', '手游', '电竞'
					],
					'动漫': ['战斗', '玄幻', '武侠', '竞技', '治愈', '几战', '青春', '校园', '恋爱', '亲子', '冒险', '推理', '励志', '魔幻', '神话', '热血',
						'益智', '科幻', '童话', '集锦', '搞笑'
					],
					'纪录片': ['人文', '军事', '动物', '历史', '地理', '探索', '社会', '科学', '纪实', '自然', '传记', '科技', '刑侦', '美食', '旅游', '政治',
						'艺术'
					],
					'生活': ['健康', '情感', '旅游', '母婴', '时尚', '美食', '养生', '百科', '家居', '科学', '心理', '健身', '宠物', '汽车', '舞蹈'],
					'曲艺': ['京剧', '选段', '评剧', '豫剧', '越剧', '黄梅戏', '晚会', '小品', '相声', '昆曲', '川剧', '晋剧', '沪剧', '河北梆子', '淮剧',
						'粤剧', '快板', '鼓曲', '说唱大书', '评书', '大鼓', '弹词', '闽剧'
					],
					'音乐': ['现场', '专辑', 'MV', '演唱会', '晚会', '影视原声', '栏目', '榜单', '音乐会'],
					'购物': ['数码', '服饰', '收藏', '珠宝', '食品', '健康', '生活', '居家'],
					'汽车': ['试驾评测', '行业评论', '资讯', '导购', '赛事', '旅游', '文化', '访谈', '情景剧', '用车养车', '趣味评车', '车展', '极客', '改装',
						'全景看车', '行车安全', '车市行情'
					]
				},
				formData: {
					goodsName: undefined,
					goodsNo: undefined,
					vrtype: "否",
					starringInitials: undefined,
					directorInitials: undefined,
					tvColumnName: undefined,
					tvColumnId: undefined,
					nameInitials: undefined,
					videoLength: undefined,
					name: undefined,
					alias: undefined,
					enName: undefined,
					category: undefined,
					sndCategory: [],
					labels: undefined,
					dsc: undefined,
					newestSeriesNo: undefined,
					seriesAmount: undefined,
					poster: undefined,
					posterH: undefined,
					definition: undefined,
					playOrder: "升序",
					arrangeOrder: undefined,
					lengthUnit: 1,
					trailerLength: undefined,
					headLength: undefined,
					tailLength: undefined,
					is3D: "否",
					is4K: "否",
					isTrailer: "否",
					isMCN: undefined,
					area: undefined,
					year: undefined,
					language: undefined,
					column: undefined,
					compere: undefined,
					compereInitials: undefined,
					producer: undefined,
					director: undefined,
					screenWriter: undefined,
					starring: undefined,
					premiereChannel: undefined,
					premiereTime: undefined,
					deployDate: undefined,
					priceLabels: undefined,
					suggestedPrice: undefined,
					score: undefined,
					prize: undefined,
					accesser: undefined,
					match: undefined,
					reporter: undefined,
					guest: undefined,
					subject: undefined,
					classHour: undefined,
					singer: undefined,
					recommendDsc: undefined,
					upFrequency: undefined,
					filmFestival: undefined,
					seriesPeriod: undefined,
					vipFlag: undefined,
					source: undefined,
					producerCompany: undefined,
					contentProvider: undefined,
					contentProviderCode: undefined,
					copyrigh: undefined,
					copyrightCode: undefined,
					crBeginDate: undefined,
					crEndDate: undefined,
					crInfoName: undefined,
					// publisher: undefined,
					outerCode: undefined,
					publishPlatform: undefined,
					relationProgram: undefined,
					relationColumn: undefined,
					epgGroup: undefined,
					cataloger: undefined,
					createTime: undefined,
					status: undefined,
					statusChangeTime: undefined,
					operator: undefined,
					others: undefined,
					isStock: "否",
					outsideSetId: undefined,
					isCoverSonProCP: 1,
					playCertification: undefined,
					licenseNumber: undefined,
					province: undefined,
					gbSetId: undefined,
					plys: "蟠龙影视",
				},
				rules: {
					directorInitials: [{
						required: true,
						message: '输入导演首字母',
						trigger: 'blur'
					}],
					is3D: [{
						required: true,
						message: '选择是否3D',
						trigger: 'blur'
					}],
					is4K: [{
						required: true,
						message: '选择是否4K',
						trigger: 'blur'
					}],
					isTrailer: [{
						required: true,
						message: '选择是否预告片',
						trigger: 'blur'
					}],
					nameInitials: [{
						required: true,
						message: '请输入名称首字母',
						trigger: 'blur'
					}],
					plys: [{
						required: true,
						message: '请输入平台来源',
						trigger: 'blur'
					}],

					videoLength: [{
						required: true,
						message: '节目集总时长',
						trigger: 'blur'
					}],


					name: [{
						required: true,
						message: '请输入节目集名称',
						trigger: 'blur'
					}],

					enName: [],
					category: [{
						required: true,
						message: 'category，分类，单选，必填',
						trigger: 'change'
					}],
					sndCategory: [{
						required: true,
						message: 'category，，单选，必填二级分类',
						trigger: 'change'
					}],


					labels: [{
						required: true,
						message: '请输入标签',
						trigger: 'blur'
					}],
					dsc: [{
						required: true,
						message: '请输入简介',
						trigger: 'blur'
					}],
					seriesAmount: [{
						required: true,
						message: '请输入节目总集数',
						trigger: 'blur'
					}],
					poster: [{
						required: true,
						message: '请输入竖海报地址',
						trigger: 'blur'
					}],
					posterH: [{
						required: true,
						message: '请输入横海报地址',
						trigger: 'blur'
					}],
					definition: [{
						required: true,
						message: 'definition，单选，必填',
						trigger: 'change'
					}],
					playOrder: [],
					arrangeOrder: [],
					lengthUnit: [{
						required: true,
						message: 'engthUnit，单选，必填',
						trigger: 'change'
					}],
					trailerLength: [],
					headLength: [],
					tailLength: [],
					is3D: [],
					is4K: [],
					isTrailer: [],
					isMCN: [],
					area: [{
						required: true,
						message: '请输入国家地区',
						trigger: 'blur'
					}],
					year: [{
						required: true,
						message: '请选择年份',
						trigger: 'change'
					}],
					language: [{
						required: true,
						message: '请输入语言',
						trigger: 'blur'
					}],
					column: [],
					compere: [],
					compereInitials: [],
					producer: [],
					director: [{
						required: true,
						message: '请输入导演',
						trigger: 'blur'
					}],
					// screenWriter: [{
					// 	required: true,
					// 	message: '请输入编剧',
					// 	trigger: 'blur'
					// }],
					starring: [{
						required: true,
						message: '请输入主演',
						trigger: 'blur'
					}],
					starringInitials: [{
						required: true,
						message: '请输入主演首字母',
						trigger: 'blur'
					}],
					premiereChannel: [{
						required: true,
						message: '请输入首播频道',
						trigger: 'blur'
					}],
					premiereTime: [],
					deployDate: [],
					priceLabels: [],
					suggestedPrice: [],
					score: [],
					prize: [],
					accesser: [],
					match: [],
					reporter: [],
					guest: [],
					subject: [],
					classHour: [],
					singer: [],
					recommendDsc: [],
					upFrequency: [],
					filmFestival: [],
					seriesPeriod: [],
					vipFlag: [{
						required: true,
						message: 'engthUnit，单选，必填是否付费',
						trigger: 'change'
					}],
					source: [{
						required: true,
						message: '请输入数据来源',
						trigger: 'blur'
					}],
					producerCompany: [],
					contentProvider: [{
						required: true,
						message: '请输入内容提供商',
						trigger: 'blur'
					}],
					contentProviderCode: [],
					copyrigh: [],
					copyrightCode: [],
					crBeginDate: [],
					crEndDate: [],
					crInfoName: [],
					publisher: [{
						required: true,
						message: '请输入发布方',
						trigger: 'blur'
					}],
					outerCode: [],
					publishPlatform: [],
					relationProgram: [],
					relationColumn: [],
					epgGroup: [],
					cataloger: [],
					createTime: [],
					status: [],
					statusChangeTime: [],
					operator: [],
					others: [],
					isStock: [],
					outsideSetId: [],
					isCoverSonProCP: [],
					playCertification: [],
					licenseNumber: [],
				},
				categoryOptions: [{
					"label": "电影",
					"value": 1
				}],
				// sndCategoryOptions: [{
				//   "label": "选项一",
				//   "value": 1
				// }, {
				//   "label": "选项二",
				//   "value": 2
				// }],

				sndCategoryOptions: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],


				definitionOptions: [{
					"label": "4K",
					"value": "4K"
				}, {
					"label": "超清",
					"value": "超清"
				}, {
					"label": "高清",
					"value": "高清"
				}, {
					"label": "标清",
					"value": "标清"
				}, {
					"label": "流畅",
					"value": "流畅"
				}],
				playOrderOptions: [{
					"label": "升序",
					"value": "升序"
				}, {
					"label": "降序",
					"value": "降序"
				}],
				arrangeOrderOptions: [{
					"label": "升序",
					"value": "升序"
				}, {
					"label": "降序",
					"value": "降序"
				}],
				lengthUnitOptions: [{
					"label": "秒",
					"value": 1
				}, {
					"label": "分",
					"value": 0
				}],
				is3DOptions: [{
					"label": "是",
					"value": "是"
				}, {
					"label": "否",
					"value": "否"
				}, ],
				is4KOptions: [{
					"label": "是",
					"value": "是"
				}, {
					"label": "否",
					"value": "否"
				}],
				isTrailerOptions: [{
					"label": "是",
					"value": "是"
				}, {
					"label": "否",
					"value": "否"
				}],
				isMCNOptions: [{
					"label": "是",
					"value": 1
				}, {
					"label": "否",
					"value": 0
				}, {
					"label": " ",
					"value": " "
				}],
				vipFlagOptions: [{
					"label": "付费",
					"value": 1
				}, {
					"label": "免费",
					"value": 0
				}],
				isStockOptions: [{
					"label": "是",
					"value": "是",
				}, {
					"label": "否",
					"value": "否"
				}],
				isCoverSonProCPOptions: [{
					"label": "是",
					"value": 1,
				}, {
					"label": "否",
					"value": 0
				}],
				vrtypeOptions: [{
						"label": "否",
						"value": "否",
					}, {
						"label": "IMAX",
						"value": "IMAX"
					},

					{
						"label": "VR180",
						"value": "VR180"
					},
					{
						"label": "IMAX",
						"value": "IMAX"
					},
					{
						"label": "VR360",
						"value": "VR360"
					},
					{
						"label": "球幕 ",
						"value": "球幕 "
					},
					{
						"label": "鱼眼",
						"value": "鱼眼"
					},
					{
						"label": "EAC",
						"value": "EAC"
					},
					{
						"label": "其他",
						"value": "其他"
					},

				],
				// vipFlagOptions: [{
				// 	"label": "是",
				// 	"value": 1,
				// }, {
				// 	"label": "否",
				// 	"value": 0
				// }],

			}
		},
		computed: {
			mainCategories() {
				return Object.keys(this.categoryData)
			}
		},
		watch: {

			data: {

				handler(e) {
					console.log(e);
					e.sndCategory = e.sndCategory.split(' ')
					this.formData = {
						...e
					}
				},
				deep: true,
				immediate: true
			}
		},
		created() {},
		mounted() {},
		beforeDestroy() {
			this.formData = {}; // 调用清理方法
		},
		methods: {
			validatePosterUrl(url) {
				if (!url) {
					return '海报地址不能为空';
				}
				if (!url.startsWith('/')) {
					return '海报地址必须以/开头';
				}
				if (!(url.endsWith('.jpg') || url.endsWith('.png'))) {
					return '海报地址必须以.jpg或.png结尾';
				}
				// 新增：检查是否包含空格
				if (url.includes(' ')) {
					return '海报地址不能包含空格';
				}
				return ''; // 空字符串表示验证通过
			},
			submitForm() {
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
					// console.log(this.formData)

					if (this.formData.poster == this.formData.posterH) {
						this.$message.error(`横竖海报不能相同`);
						return false;
					}

					const posterError = this.validatePosterUrl(this.formData.poster);
					if (posterError) {
						this.$message.error(`竖海报地址错误: ${posterError}`);
						return false;
					}

					// 验证横海报
					const posterHError = this.validatePosterUrl(this.formData.posterH);
					if (posterHError) {
						this.$message.error(`横海报地址错误: ${posterHError}`);
						return false;
					}


					this.$emit('tjinfo', this.formData)

				})
			},
			resetForm() {
				this.$refs['elForm'].resetFields()
			},
			handleMainCategoryChange(value) {
				this.formData.sndCategory = []
				this.subCategories = value ? this.categoryData[value] : []
			},
			checkInputLength() {
				this.isOverLimit = this.formData.name.length > 58;
			},
			checkDscLength() {
				const length = this.formData.dsc ? this.formData.dsc.length : 0;
				this.isDscInvalid = length < 20 || length > 80;
			}
		}
	}
</script>
<style>
</style>